<template>
  <el-card class="swiper-container">
    <div class="header">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
        >新增商品</el-button
      >
    </div>
    <el-table
      :load="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="goodsId" label="商品编号"> </el-table-column>
      <el-table-column prop="goodsName" label="商品名" />
      <el-table-column prop="goodsIntro" label="商品简介" />
      <el-table-column prop="" label="商品图片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="$filters.prefix(scope.row.goodsCoverImg)"
          ></el-image>
          <!-- <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.goodsCoverImg"></el-image> -->
        </template>
      </el-table-column>
      <el-table-column prop="stockNum" label="商品库存" />
      <el-table-column prop="sellingPrice" label="商品售价" />
      <el-table-column prop="" label="上架状态">
        <template #default="scope">
          <span style="color: green" v-if="scope.row.goodsSellStatus == 0"
            >销售中</span
          >
          <span style="color: red" v-else>已下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <a
            style="cursor: pointer; margin-right: 10px"
            @click="handleEdit(scope.row.goodsId)"
            >修改</a
          >
          <a
            v-if="scope.row.goodsSellStatus == 0"
            style="cursor: pointer; margin-right: 10px"
            @click="handleStatus(scope.row.goodsId, 1)"
            >下架</a
          >
          <a
            v-else
            style="cursor: pointer; margin-right: 10px"
            @click="handleStatus(scope.row.goodsId, 0)"
            >上架</a
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />
  </el-card>
</template>

<script>
import { onMounted, reactive, toRefs, getCurrentInstance,ref } from "vue";
import axios from "@/utils/axios";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Good",
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    // const { ctx } = getCurrentInstance();
    // const instance = getCurrentInstance()
    // console.log('instance???', instance.appContext.config.globalProperties)
    // const loading = ref(true)
    const state = reactive({
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 10,
    });
    onMounted(() => {
      getGoodList();
    });
    const getGoodList = () => {
      state.loading = true;
      axios
        .get("/goods/list", {
          params: {
            pageNumber: state.currentPage,
            pageSize: state.pageSize,
          },
        })
        .then((res) => {
          state.tableData = res.list;
          state.total = res.totalCount;
          state.currentPage = res.currPage;
          state.loading = false;
          //回到顶部
          proxy.goTop() // 回到顶部
        });
    };
    // 改变状态
    const handleStatus = (id, status) => {
      axios
        .put(`/goods/status/${status}`, {
          ids: id ? [id] : [],
        })
        .then(() => {
          ElMessage.success("修改成功");
          getGoodList();
        });
    };
    const handleAdd = () => {
      router.push({
        path: "/add",
      });
    };
    const handleEdit = (id) => {
      router.push({
        path: "/add",
        query:{
          id
        }
      });
    };
    const changePage = (val) => {
      state.currentPage = val;
      getGoodList();
    };

    return {
      ...toRefs(state),
      //    getGoodList,
      changePage,
      handleStatus,
      handleAdd,
      handleEdit,
    //   loading
    };
  },
};
</script>

<style></style>
